<style scoped lang="stylus" type="text/stylus">
@import 'myChk.styl';
</style>

<template>
  <div id="myCheck">
    <VuePerfectScrollbar class="myCheck_left" ref="myCheck_left">
      <ul>
        <li class="myCheck_audit" :class="{activeColor:active==policys.policyId}" v-for="(policys,index) of applyList" :key="index" @click="auditInfoPage(policys.policyId,policys)">
          <p class="audit_Title">{{index+1}}. {{policys.shortTitle}}</p>
          <p class="audit_info">{{policys.longTitle}}</p>
          <div class="audit_bylaw">
            <div class="audit_time">发布于：{{policys.publishAt}}</div>
            <div class="audit_total">
              <p>待办：{{policys.workTotal?policys.workTotal:0}}</p>
              <p>经手过的审核: {{policys.doneTotal?policys.doneTotal:0}}</p>
            </div>
          </div>
        </li>
      </ul>
    </VuePerfectScrollbar>

    <div class="myCheck_right">
      <div class="chksTitle">
        <div class="myCheckNav">
          <div :class="{'active':!tapChks}" class="navTabLeft" @click="getAllNotStartWork01()">待办</div>
          <span class="underline1" v-if="!tapChks"></span>
          <div :class="{'active':tapChks}" class="navTabRight" @click="getAllNotStartWork02()">我经手过的审核</div>
          <span class="underline2" v-if="tapChks"></span>
        </div>
        <div class="companySearch" v-if="tapChks == 0">
          <Input v-model="companyName" placeholder="请输入企业名称" style="width: 150px"></Input>
          <Button type="info" @click="getCompanyApply(0)">查询</Button>
        </div>
        <div class="companySearch" v-if="tapChks == 1">
          <Input v-model="companyName" placeholder="请输入企业名称" style="width: 150px"></Input>
          <Button type="info" @click="getCompanyApply(1)">查询</Button>
        </div>
      </div>
      <VuePerfectScrollbar ref="policyLists" class="chksContent">
        <div class="chksContent_await">
          <ul class="chksContentList">

            <li v-if="isToDo" @click="targetCheckInfo(item.id)" v-for="item in allNotStartWorkList" :key="item.id">
              <div class="chksContentInfo">

                <!-- 按钮  -->
                <div class="chksContent_btn">
                  <Button @click.stop='startAudit(item)' type="primary" class="startAudit" v-if="tapChks==0 && item.processInstance.activities.length==1">开启审核</Button>
                  <Button @click.stop='onThetable(item.id)' type="success" v-if="item.processInstance.activities.length==3">上会表格</Button>
                </div>

                <div class="chksContentTop">
                  <!-- 企业名 -->
                  <span class="chksContentTopTitle">{{item.companyName}}</span>
                </div>
                <div class="chksContentCenter">
                  <div class="chksContentCenterTop">
                    <!-- 审核状态 -->
                    <!-- 审核状态 -->
                    <div v-show="item.applyStatus==30 || item.applyStatus==31" class="auditStatus">
                      <span class="auditStatusTitle">审核状态</span>
                      <div v-if="item.processInstance.activities.length==2" class="auditStatusContent">
                        <ul>
                          <li v-for="items in item.processInstance.activities[1].children" :key="items.id">
                            {{items.name}}
                            <span v-show="items.ended == true" class="status01">完成</span>
                            <span v-show="items.ended == false && items.replyStatus==''" class="status02">进行中</span>
                            <span v-show="items.ended == false && items.replyStatus=='1'" class="status02">待补充材料</span>
                            <span v-show="items.ended == false && items.replyStatus=='2'" class="status02">补充材料已提交</span>
                          </li>
                        </ul>
                      </div>
                      <div v-show="item.processInstance.activities.length==1">
                        <span>未开始，待管理员开始</span>
                      </div>
                      <div v-show="item.processInstance.activities.length==3">
                        <span>审核完毕，待管理员结案</span>
                      </div>
                    </div>
                    <div v-show="item.applyStatus!=30 && item.applyStatus!=31" class="auditStatus">
                      <span class="auditStatusTitle">审核已完结</span>
                      <p v-show="item.applyStatus == 38" class="auditStatusTitleInfoOk">已批准拨款</p>
                      <p v-show="item.applyStatus == 39" class="auditStatusTitleInfoNo">已拒绝拨款</p>
                      <p v-show="item.applyStatus == 49 || item.applyStatus == 42" class="auditStatusTitleInfoInterrupt">
                        已强制中断</p>
                    </div>
                    <!-- 申请概况 -->
                    <div class="applicationProfile">
                      <span class="applicationProfileTitle">申请概况</span>
                      <span class="textBlod">政策{{item.policyId}}：{{item.policyShortTitle}}</span>
                      <ul>
                        <li v-for="items in item.applyPrizes" :key="items.prizeId">{{items.prizeTitle}}（
                          <span>{{items.amount}}万</span>）
                        </li>
                      </ul>
                      <div class="applyAmount">申请总额：
                        <span>{{item.applyAmount}}万</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chksContentBottom">
                  <div class="chksContentBottomTitle">时间统计</div>
                  <div class="timeStatisticsInfo">
                    <ul class="infoLeft">
                      <li>线上申请提交：
                        <span>{{item.applyAt | formatDate}}</span>（{{Math.ceil((nowTime - item.applyAt) / (24*60*60*1000))}}天前）
                      </li>
                      <li>线下办理：
                        <span>{{item.lastUpdateAt | formatDate}}</span>（{{Math.ceil((nowTime - item.lastUpdateAt) / (24*60*60*1000))}}天前）
                      </li>
                      <li>进入线下审核：
                        <span>{{item.processInstance.activities[0].startAt | formatDate}}</span>（{{Math.ceil((nowTime - item.processInstance.activities[0].startAt) / (24*60*60*1000))}}天前）
                      </li>
                      <li v-show="item.processInstance.endAt != null">线下审核总耗时：已完结 （{{Math.ceil((item.processInstance.endAt - item.processInstance.startAt) / (24*60*60*1000))}}天）
                      </li>
                      <li v-show="item.processInstance.endAt == null">线下审核总耗时： 进行中 （{{Math.ceil((nowTime - item.processInstance.startAt) / (24*60*60*1000))}}天）
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <li v-if="isHaveBeen" @click="targetCheckInfo(item.id)" v-for="item in allDoneWork" :key="item.id">
              <div class="chksContentInfo">
                <div class="chksContentTop">
                  <!-- 企业名 -->
                  <span class="chksContentTopTitle">{{item.companyName}}</span>
                </div>
                <div class="chksContentCenter">
                  <div class="chksContentCenterTop">
                    <!-- 审核状态 -->
                    <div v-show="item.applyStatus==30 || item.applyStatus==31" class="auditStatus">
                      <span class="auditStatusTitle">审核状态</span>
                      <div v-if="item.processInstance.activities.length==2" class="auditStatusContent">
                        <ul>
                          <li v-for="items in item.processInstance.activities[1].children" :key="items.id">
                            {{items.name}}
                            <span v-show="items.ended == true" class="status01">完成</span>
                            <span v-show="items.ended == false" class="status02">进行中</span>
                          </li>
                        </ul>
                      </div>
                      <div v-show="item.processInstance.activities.length==1">
                        <span>未开始，待管理员开始</span>
                      </div>
                      <div v-show="item.processInstance.activities.length==3">
                        <span>审核完毕，待管理员结案</span>
                      </div>
                    </div>
                    <div v-show="item.applyStatus!=30 && item.applyStatus!=31" class="auditStatus">
                      <span class="auditStatusTitle">审核已完结</span>
                      <p v-show="item.applyStatus == 38" class="auditStatusTitleInfoOk">已批准拨款</p>
                      <p v-show="item.applyStatus == 39" class="auditStatusTitleInfoNo">已拒绝拨款</p>
                      <p v-show="item.applyStatus == 49" class="auditStatusTitleInfoInterrupt">已强制中断</p>
                    </div>
                    <!-- 申请概况 -->
                    <div class="applicationProfile">
                      <span class="applicationProfileTitle">申请概况</span>
                      <span class="textBlod">政策{{item.policyId}}：{{item.policyShortTitle}}</span>
                      <ul>
                        <li v-for="items in item.applyPrizes" :key="items.prizeId">{{items.prizeTitle}}（
                          <span>{{items.amount}}万</span>）
                        </li>
                      </ul>
                      <div class="applyAmount">申请总额：
                        <span>{{item.applyAmount}}万</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chksContentBottom">
                  <div class="chksContentBottomTitle">时间统计</div>
                  <div class="timeStatisticsInfo">
                    <ul class="infoLeft">
                      <li>线上申请提交：
                        <span>{{item.applyAt | formatDate}}</span>（{{Math.ceil((nowTime - item.applyAt) / (24*60*60*1000))}}天前）
                      </li>
                      <li>线下办理：
                        <span>{{item.lastUpdateAt | formatDate}}</span>（{{Math.ceil((nowTime - item.lastUpdateAt) / (24*60*60*1000))}}天前）
                      </li>
                      <li>进入线下审核：
                        <span>{{item.processInstance.activities[0].startAt | formatDate}}</span>（{{Math.ceil((nowTime - item.processInstance.activities[0].startAt) / (24*60*60*1000))}}天前）
                      </li>
                      <li v-show="item.processInstance.endAt != null">线下审核总耗时：已完结 （{{Math.ceil((item.processInstance.endAt - item.processInstance.startAt) / (24*60*60*1000))}}天）
                      </li>
                      <li v-show="item.processInstance.endAt == null">线下审核总耗时： 进行中 （{{Math.ceil((nowTime - item.processInstance.startAt) / (24*60*60*1000))}}天）
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>
            <div class="notContent" v-if="allNotStartWorkList.length == 0 && isToDo">
              <i class="icon iconfont icon-zanwuneirong"></i>
              <div class="name">暂无内容</div>
            </div>
            <div class="notContent" v-if="allDoneWork.length == 0 && isHaveBeen">
              <i class="icon iconfont icon-zanwuneirong"></i>
              <div class="name">暂无内容</div>
            </div>
          </ul>
        </div>
      </VuePerfectScrollbar>
      <Page v-if="allNotStartWorkList.length != 0 && isToDo==true" :total="totalCount01" :page-size="pageSize01" show-elevator show-total @on-change="handlePage01" @on-page-size-change="handlePageSize01" :current="pageNum01" class="PageStyle"></Page>
      <Page v-if="allDoneWork.length != 0 && isHaveBeen==true" :total="totalCount02" :page-size="pageSize02" show-elevator show-total @on-change="handlePage02" @on-page-size-change="handlePageSize02" :current="pageNum02" class="PageStyle"></Page>
    </div>

    <!-- 企业统计名单模态框选时间 -->
    <Modal v-model="Statistics" title="请选择时间段" @on-ok="exportData" ok-text="导出">
      <div style="height:35px">
          <Col span="12">
            <DatePicker :value="showTime" format="yyyy-MM-dd" type="daterange" placement="bottom" placeholder="选择时间段" @on-change="getDateValue" style="width: 300px"></DatePicker>
          </Col>
      </div>
    </Modal>

  </div>
</template>

<script type="text/ecmascript-6">
import { formatDate } from "../../../common/date.js";

export default {
  name: "myChk",
  data() {
    return {
      showTime: "", // 日期选择器展示时间
      startDateTime: "", //开始时间
      endDateTime: "", //截止时间
      Statistics: false, //企业统计名单模态框选时间
      findExamineListItem: [], // 申请实例列表
      allNotStartWorkList: [], // 待办列表
      allDoneWork: [], // 经办列表
      id: "", // 申请实例id
      nowTime: "", // 当前时间
      isToDo: true, // 待办
      isHaveBeen: false, // 经办
      tapChks: 0, // 状态判断
      applyList: [],
      policysObj: {},
      active: "", //选择的审核
      auditObj: "",
      Objindex: "", //第一个代办
      policyId: "", //当前审核的id
      companyName: "",
      pageNum01: 1,
      pageSize01: 1,
      totalCount01: 0,
      pageNum02: 1,
      pageSize02: 1,
      totalCount02: 0,
    };
  },
  filters: {
    // 时间过滤器
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日");
    }
  },
  created() {},
  mounted() {
    // this.getAllNotStartWork(this.getRouteQuery.tapChks); // 状态记忆
    this.getNowTime(); // 获取当前时间
  },
  computed: {
    processInstance() {
      return this.allNotStartWorkList.processInstance;
    },
    activities() {
      return this.processInstance ? this.processInstance.activities : [];
    },
    // 当路由发生变化的时候，即使返回当前路由参数
    getRouteQuery() {
      return this.$route.query;
    }
  },
  methods: {
    //获取全部
    getAllApply(index) {
      // this.$Spin.show();
      this.ajaxData(
        {
          type: "get",
          url: "/workflow/workAndDonePolicy"
        },
        res => {
          this.applyList = res;

          if (this.$store.state.policysObj == "") {
            this.auditInfo(this.applyList[0].policyId, this.applyList[0]);
          } else {
            this.auditInfo(
              this.$store.state.policysObj.policyId ||
              this.applyList[0].policyId,
              this.$store.state.policysObj || this.applyList[0]
            );

            setTimeout(() => {
              document.querySelector(".myCheck_left").scrollTop =
                this.$store.state.scrollTop || 0;
                this.$refs.myCheck_left.update();
            }, 10);
          }
        }
      );
    },
    // 待办的分页
    handlePage01(value) {
      this.pageNum01 = value;
      this.getAllNotStartWork01();
    },
    handlePageSize01(value) {
      this.pageSize01 = value;
      this.getAllNotStartWork01();
    },
    // 经办的分页
    handlePage02(value) {
      this.pageNum02 = value;
      this.getAllNotStartWork02();
    },
    handlePageSize02(value) {
      this.pageSize02 = value;
      this.getAllNotStartWork02();
    },

    //对应审核
    auditInfo(index, policyIdAll) {
      this.isToDo = true;
      this.isHaveBeen = false;
      if (policyIdAll == undefined) {
        this.policysObj = this.applyList[0];
      } else {
        this.policysObj = policyIdAll;
      }
      this.companyName = "";
      this.active = index;
      // this.policyId = policyIdAll.policyId;
      this.policyId = this.policysObj.policyId;
      this.ajaxData(
        {
          type: "get",
          url: "/workflow/work",
          data: {
            page: this.pageNum01,
            pageSize: 5,
            policyId: this.policyId
          }
        },
        res => {
          this.tapChks = 0;
          this.allNotStartWorkList = res.results;
          this.totalCount01 = res.totalPage;
          // setTimeout(() => {
          //   document.querySelector(".chksContent").scrollTop =
          //     this.getRouteQuery.scrollRightTop || 0;
          //   this.$refs.policyLists.update();
          // }, 10);
        }
      );
    },

    //点击左侧获取对应审核并分页重置到第一页
    auditInfoPage(index, policyIdAll) {
      this.pageNum01 = 1;
      this.pageSize01 = 1;
      this.pageNum02 = 1;
      this.pageSize02 = 1;
      var scrollTop = document.querySelector(".myCheck_left").scrollTop;
      this.$store.commit("setPolicysObj", policyIdAll);
      this.$store.commit("setScrollTop", scrollTop);

      //调用获取对应审核
      this.auditInfo(index, policyIdAll);
    },


    //开启审核
    startAudit(item) {
      this.ajaxData(
        {
          type: "post",
          url: "/workflow/endActivity",
          data: {
            applyId: item.id,
            activityId: item.processInstance.activities[0].id,
            result: 1
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.getAllApply(this.active);
            this.auditInfo(this.active, this.policysObj);
          }
        }
      );
    },
    //上会表
    onThetable(id) {
      this.ajaxData(
        {
          type: "get",
          url: "/workflow/workFlowExcelCreate",
          data: {
            applyId: id
          }
        },
        (res, all) => {
          if (all.code == 0) {
            window.location.href = res.filePath;
          } else {
            this.$Message.info("上会表不存在");
            return;
          }
        }
      );
    },
    //==================
    //获取当前时间
    getNowTime() {
      this.nowTime = Date.parse(new Date());
    },
    // 根据企业名称搜索对应的申请
    getCompanyApply(n) {
      this.tapChks = n;
      const url = !this.tapChks ? "/workflow/work" : "/workflow/done";
      this.ajaxData(
        {
          type: "get",
          url: url,
          data: {
            companyName: this.companyName,
            policyId: this.policyId,
            page: 1,
            pageSize: 10000
          }
        },
        res => {
          this.allNotStartWorkList = res.results;
          this.totalCount = 1;
        }
      );
    },
    //    获取待办列表
    getAllNotStartWork01() {
      this.tapChks = 0;
      this.pageSize02 = 1;
      this.pageNum02 = 1;
      this.isToDo = true;
      this.isHaveBeen = false;
      this.ajaxData(
        {
          urlv2: "1",
          type: "get",
          url: "/workflow/work",
          data: {
            page: this.pageNum01,
            pageSize: 5,
            policyId: this.policyId
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.allNotStartWorkList = res.results;
            this.totalCount01 = res.totalPage;
            // setTimeout(() => {
            //   document.querySelector(".chksContent").scrollTop =
            //     this.getRouteQuery.scrollRightTop || 0;
            //   this.$refs.policyLists.update();
            // }, 10);
          }
        }
      );
    },
    //    获取经办列表
    getAllNotStartWork02() {
      this.tapChks = 1;
      this.pageSize01 = 1;
      this.pageNum01 = 1;
      this.isToDo = false;
      this.isHaveBeen = true;
      this.ajaxData(
        {
          urlv2: "1",
          type: "get",
          url: "/workflow/done",
          data: {
            page: this.pageNum02,
            pageSize: 5,
            policyId: this.policyId
          }
        },
        (res, all) => {
          if (all.code == 0) {
            this.allDoneWork = res.results;
            this.totalCount02 = res.totalPage;
            // setTimeout(() => {
            //   document.querySelector(".chksContent").scrollTop =
            //     this.getRouteQuery.scrollRightTop || 0;
            //   this.$refs.policyLists.update();
            // }, 10);
          }
        }
      );
    },
    //    点击当前审核卡片，跳转到对应的申请详情页
    targetCheckInfo(id) {
      this.$router.push({
        path: "/component",
        name: "Component",
        query: {
          tapChks: this.tapChks,
          id: id,
          name: "myChk",
          pageName: "我的审核",
          scrollLeftTop: document.querySelector(".myCheck_left").scrollTop,
          scrollRightTop: document.querySelector(".chksContent").scrollTop
        }
      });
    },

    //获取用户选择的日期
    getDateValue(value) {
      if (value[0] != "") {
        this.startDateTime = new Date(value[0]).getTime();
        this.endDateTime = new Date(value[1]).getTime();
      } else {
        this.startDateTime = "";
        this.endDateTime = "";
      }
    },

    //导出
    exportData() {
      const url =
        this._URL_v2 +
        `/apply/getApproveOnlineAllCompany?startDate=${this.startDateTime /
          1000}&endDate=${this.endDateTime / 1000}`;
      this.$http.get(url).then(res => {
        window.open(res.body.result.fileUrl);
      });
    }
  },
  created() {
    this.getAllApply();
  }
};
</script>
